<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>vue列表添加动画</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		[v-cloak] {
			display: none;
		}
		body {
			padding: 50px;
			box-sizing: border-box;
		}

		.tag-radio {
			display: flex;
    		gap: 12px;
		}
		.tag-radio .item {
	        color: rgba(255,255,255,.45);
	        background: #282A30;
	        border-radius: 14px;
	        padding: 0 12px;
	        height: 28px;
	        line-height: 28px;
	        cursor: pointer; 
	    }
	    .tag-radio .item.active {
            background: #34363B;
            color: #fff;
        }
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="list">
			<m-tag-radio v-model="value" :list="list">
				<template v-slot:label="slotScoped">
					<span>{{slotScoped.item.label}}</span>
					<span>{{slotScoped.item.number}}</span>
				</template>
			</m-tag-radio>
		</div>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.6.8/vue.min.js"></script>
	<script>
		// 局部注册
		var mTagRadio = {
			template: `
				<div class="tag-radio">
					 <div v-for="(item, index) in list" :key="index" 
			            class="item"
			            :class="{active: item.value == value}"
			            @click="handleChange(item)">
			            <template v-if="$scopedSlots.label">
			                <slot name="label" :item="item"></slot>
			            </template>
			            <template v-else>
			                {{ item.label }}
			            </template>
			        </div>
				</div>
				`,
			model: {
		        prop: 'value',
		        event: 'changeValue'
		    },
		    props: {
		        // 显示控制
		        value: {
		            default: ''
		        },
		        list: {
		            type: Array,
		            default: () => []
		        },
		    },
			data() {
				return {

				}
			},
			mounted() {
				console.log(this.$scopedSlots);
			},
			methods: {
				handleChange(item) {
		            this.$emit('changeValue', item.value); // 触发父组件的值变化事件
		        }
			}
		}

		var app = new Vue({
			el: '#app',
			// 局部注册组件
			components: {
				mTagRadio: mTagRadio
			},
			data () {
				return {
					value: '1',

					list: [
						{label: '英雄联盟', value: '1', number: 10},
						{label: '和平精英', value: '2', number: 15},
						{label: '刺客信条', value: '3', number: 5},
					]
				}
			},
			mounted () {
				
			},
			methods: {
				
			}
		})

	</script>
</body>	
</html>